<template>
  <div>

    <el-form :model="dataForm" ref="dataForm" label-width="140px" size="small" :rules="rules">
      <h4>基本信息</h4>
      <el-form-item label="产品名称：" prop="productName">
        <el-input v-model="dataForm.productName" placeholder="不超过15个字" show-word-limit maxlength="15"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="产品大类：" prop="productCategory">
        <el-select placeholder="请选择产品大类" v-model="dataForm.productCategory" @change="dataForm.productSubCategory=''" clearable>
          <el-option v-for="(value, key) in dicts['product_category'].childMap" :key="key" :label="value" :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="产品小类：" prop="productSubCategory">
        <el-select placeholder="请选择产品小类" v-model="dataForm.productSubCategory" clearable>
          <el-option v-for="(value, key) in dicts['prod_sub_'+(dataForm.productCategory||'car_loan')].childMap"
                     :key="key" :label="value" :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属机构:" prop="corporationId">
        <el-select :disabled="org.corporationId!==undefined" v-model="(dataForm).corporationId" clearable>
          <el-option v-for="(item) in corporationList" :key="item.corporationId" :label="item.corporationName"
                     :value="item.corporationId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="可申请区域:" prop="admitArea">
        <multiCascader
          @change="onChange"
          :data="localMap"
          is-two-dimension-value
          v-model="selectedOptions">
        </multiCascader>
      </el-form-item>
      <h4>产品要素</h4>
      <el-form-item label="最高额度(万元)：" prop="maxQuota">
        <el-input-number  :precision="0" :step="1" :min="0" v-model="dataForm.maxQuota" type="number" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="利率类型：" prop="interestRateType">
        <el-select placeholder="请选择利率类型" v-model="dataForm.interestRateType" clearable>
          <el-option v-for="(value, key) in dicts['interest_rate_type'].childMap" :key="key" :label="value"
                     :value="key"/>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="最低利率(%)：" prop="minRate">
            <el-input-number  :precision="2" :step="0.1" :max="100" :min="0" v-model="dataForm.minRate" type="number" clearable></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高利率(%)：" prop="maxRate">
            <el-input-number  :precision="2" :step="0.1" :max="100" :min="0" v-model="dataForm.maxRate" type="number" clearable></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="还款方式：" prop="repaymentType">
        <el-select placeholder="请选择还款方式" v-model="repaymentTypes" multiple clearable
                   @change="repaymentTypeChange">
          <el-option v-for="(value, key) in dicts['repayment_method'].childMap" :key="key" :label="value" :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="最长期限(期)：" prop="maxPeriods">
        <el-input-number  :precision="0" :step="1" :min="0" v-model="dataForm.maxPeriods" type="number" clearable></el-input-number>
      </el-form-item>
      <h4>办理信息</h4>
      <el-form-item label="准入要求：" prop="applyQualification">
        <el-input v-model="dataForm.applyQualification" type="textarea"
                  placeholder="请输入征信要求、资质要求等信息(400字以内)" maxlength="400" show-word-limit
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="审批流程：" prop="productFlow">
        <el-input v-model="dataForm.productFlow" type="textarea" placeholder="请输入审批流程、注意事项等信息(400字以内)"
                  maxlength="30" clearable></el-input>
      </el-form-item>

      <h4>面签要求</h4>
      <el-form-item label="是否需要面签：" prop="needFaceSign">
        <el-select placeholder="请选择是否需要面签" v-model="dataForm.needFaceSign" clearable>
          <el-option key="YES" label="是" value="YES"/>
          <el-option key="NO" label="否" value="NO"/>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.needFaceSign==='YES'" label="面签材料等要求：" prop="needMaterial">
        <el-input v-model="dataForm.needMaterial" type="textarea" placeholder="请输入面签材料等相关要求(400字以内)"
                  maxlength="400" show-word-limit clearable></el-input>
      </el-form-item>
      <el-form-item label="产品推荐语：" prop="productSlogan">
        <el-input v-model="dataForm.productSlogan" type="textarea" placeholder="请简要概括产品亮点(15个字符以内)"
                  maxlength="15" show-word-limit clearable></el-input>
      </el-form-item>
      <el-form-item label="其他备注：" prop="supplement">
        <el-input v-model="dataForm.supplement" type="textarea" placeholder="如有其他备注，请输入(200字以内)"
                  maxlength="200" show-word-limit clearable></el-input>
      </el-form-item>

      <el-form-item style="margin-top: 10px" label-width="130px">
        <el-button type="" @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          <fa-icon class="fa-check"/>
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {common} from '@/utils/common'
import api from '../api'
import {getCookie} from '@/utils/util'
import {CONSTANT_OBJ} from '@/utils/constant'
import {mapState} from 'vuex'
import multiCascader from '@/components/multiCascader/index.vue'
import localMap from '../js/localMap.json'
export default {
  components: {multiCascader},

  props: {
    editData: Object,
    org: {
      type: Object,
      default
        () {
        return {}
      }
    }
  },
  data () {
    return {
      localMap,
      selectedOptions: [],
      repaymentTypes: [],
      dataForm: {
        roleId: '',
        productId: '',//.
        productName: '',//产品名称
        productCategory: '',//产品大类
        productSubCategory: '',//产品小类
        productStatus: '',//产品状态
        corporationId: '',//合作机构ID
        corporationName: '',//合作机构名称
        admitArea: '',//可申请区域
        maxQuota: '',//最大额度
        interestRateType: '',//利率类型
        minRate: '',//最小利率
        maxRate: '',//最大利率
        repaymentType: '',//还款方式
        maxPeriods: '',//最大期数
        applyQualification: '',//申请资格
        productFlow: '',//产品流程
        needFaceSign: '',//是否需要面签
        needMaterial: '',//所需资料
        productSlogan: '',//产品推荐语
        supplement: '',//补充说明

      },
      rules: {
        productName: [{required: true, message: '请输入产品名称', trigger: 'blur'}],
        productCategory: [{required: true, message: '请选择产品大类', trigger: 'change'}],
        productSubCategory: [{required: true, message: '请选择产品小类', trigger: 'change'}],
        corporationId: [{required: true, message: '请选择合作机构', trigger: 'change'}],
        // admitArea: [{required: true, message: '请输入可申请区域', trigger: 'blur'}],
        maxQuota: [{required: true, message: '请输入最大额度', trigger: 'blur'}],
        interestRateType: [{required: true, message: '请选择利率类型', trigger: 'change'}],
        minRate: [{required: true, message: '请输入最小利率', trigger: 'blur'}],
        repaymentType: [{required: true, message: '请选择还款方式', trigger: 'change'}],
        maxPeriods: [{required: true, message: '请输入最大期数', trigger: 'blur'}],
        applyQualification: [{required: true, message: '请输入申请资格', trigger: 'blur'}],
        productFlow: [{required: true, message: '请输入产品流程', trigger: 'blur'}],
        needFaceSign: [{required: true, message: '请输入是否需要面签', trigger: 'change'}],
        // needMaterial: [{required: true, message: '请输入所需资料', trigger: 'blur'}],
        productSlogan: [{required: true, message: '请输入产品推荐语', trigger: 'blur'}],

      },
      corporationList: []
    }
  }
  ,
  methods: {
    // 预览图片

    /**
     * 提交代码
     */
    submit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.addProd()
        }
      })
    },
    // 新增
    addProd () {
      (this.editData.productId ? api.editLoan : api.addLoan)({
        ...this.dataForm,
        tenantId: getCookie('tenantId')
      }).then(res => {
        const {responseCode, responseMsg} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.$message({
            message: `${responseMsg}`,
            type: 'success'
          })
          this.$emit('close')
        }
      })
    },
    close () {
      this.$emit('close')
    }
    ,

    //获取机构列表数据
    getOrgList () {
      api.queryList({tenantId: getCookie('tenantId')}).then(res => {
        const {responseCode, responseMsg, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.corporationList = data
          console.log('机构列表', this.corporationList)
        }
      })
    }
    ,
    onChange () {
      console.log(this.selectedOptions)
      this.dataForm.admitArea = this.selectedOptions.map(item => item.join('-')).join(',')
    },
    getDetail () {
      api.queryDetail({productId: this.editData.productId, productType: 'LOAN'}).then(res => {
        const {responseCode, responseMsg, data} = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.selectedOptions = (data.admitArea||'').split(',').map(i => i.split('-'))
          this.repaymentTypes = data.repaymentType.split(',')
          this.dataForm = data
        }
      })
    },
    repaymentTypeChange (val) {
      this.dataForm.repaymentType = val.join(',')
    },
  }
  ,
  mounted () {
    if (this.org.corporationId) {
      this.dataForm.corporationId = this.org.corporationId
    }
    if (this.editData.productId) {
      this.getDetail()
    }
    this.getOrgList()

  }
  ,
  computed: {
    ...
      mapState({
        dicts: state => state.common.dicts
      })
  }
}
</script>

<style type="text/css">
.after-form-item-span{
  margin-left: 10px;
}
</style>

